<template>
    <div class="app-container">
  
      <!--搜索表单-->
      <el-form :inline="true" :model="searchEmp" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input
            v-model="searchEmp.name"
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属班组">
          <el-input
            v-model="searchEmp.name"
            placeholder="请输入班组"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属工序">
          <el-input
            v-model="searchEmp.name"
            placeholder="请输入工序"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="性别">
          <el-select v-model="searchEmp.gender" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item> -->
  
        <!-- <el-form-item label="入职时间">
          <el-date-picker
            v-model="entrydate"
            clearable
            value-format="yyyy-MM-dd"
            type="daterange"
            placeholder="选择日期"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 400px; margin-left: 20px"
          ></el-date-picker>
        </el-form-item> -->
  
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
           <el-button type="info" @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
  
  
  
      <!--按钮-->
      <el-row>
        <el-button type="danger" size="medium" @click="deleteByIds">- 批量删除</el-button>
        <el-button type="primary" size="medium" @click="dialogVisible = true; emp = { image: ''};" >+ 新增员工</el-button>
      </el-row>
  
      <br>
      <!--表格-->
      <template>
        <el-table :data="deptList" style="width: 100%" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"  align="center"></el-table-column>
          <el-table-column  prop="id"  label="id"  align="center"></el-table-column>
          <el-table-column  prop="name"  label="姓名"  align="center"></el-table-column>
          <el-table-column  prop="team"  label="所属班组"  align="center"></el-table-column>
          <el-table-column  prop="process"  label="所属工序"  align="center"></el-table-column>

          <el-table-column
  prop="sailings"
  label="工作状态"
  align="center">
  <template slot-scope="scope">
    <span :style="{ color: scope.row.sailings === '正在工作' ? 'green' : 'red' }">
      {{ scope.row.sailings }}
    </span>
  </template>
</el-table-column>
  
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="update(scope.row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
  
      <!--分页工具条-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="background"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { page, add, update, deleteById, selectById } from "@/api/emp.js";
  import { findAll } from "@/api/dept.js";
  import { getToken } from '@/utils/auth';
  
  export default {
    data() {
      return {
        timer: null,
  
        // 分页添加背景色
        background: true,
        // 每页显示的条数
        pageSize: 5,
        // 总记录数
        totalCount: 100,
        // 当前页码
        currentPage: 1,
        // 添加数据对话框是否展示的标记
        dialogVisible: false,
        // 品牌模型数据
        searchEmp: {
          name: "",
          gender: "",
        },
        emp: {
          image: "",
        },
        deptList: [],
        genderList: [{id: 1,name: "男"},{id: 2,name: "女"}],
    
        beginTime: "",
        endTime: "",
        entrydate: "",
  
        // 被选中的id数组
        selectedIds: [],
        // 复选框选中数据集合
        multipleSelection: [],
        token: {token: getToken()}
      };
    },
  
    mounted() {
        this.page(); // 当页面加载完成后，发送异步请求，获取数据
  findAll().then((result) => {
    this.deptList = result.data.data;
  });

  // 设置定时器，每隔10秒更新一次数据
  this.timer = setInterval(() => {
    findAll().then((result) => {
    this.deptList = result.data.data;
  });
  }, 5000); // 10000毫秒 = 10秒

},

beforeDestroy() {
  // 在组件销毁前清除定时器
  clearInterval(this.timer);
    },
    
    methods: {
  
      // 查询分页数据
      page() {
        page(
          this.searchEmp.name,
          this.searchEmp.gender,
          this.beginTime,
          this.endTime,
          this.currentPage,
          this.pageSize
        ).then((res) => {
          this.totalCount = res.data.data.total;
          this.tableData = res.data.data.rows;
        });
      },
      qrCodeSrc(row) {
      return require(`@/assets/qrcode${row.id}.jpg`);
    },
      // 复选框选中后执行的方法
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
  
      // 查询方法
      onSubmit() {
        this.currentPage = 1;
        this.page();
      },
  
      clear(){
        this.searchEmp = {name: "", gender: ""};
        this.beginTime = "",
        this.endTime = "";
        this.entrydate = "";
        this.page();
      },
      // 添加数据
      add() {
        let operator;
  
        if (this.emp.id) {
          //修改
          operator = update(this.emp);
        } else {
          operator = add(this.emp);
        }
  
        operator.then((resp) => {
          if (resp.data.code == "1") {
            this.dialogVisible = false;
            this.page();
            this.$message({ message: "恭喜你，保存成功", type: "success" });
            this.emp = { image: "" };
          } else {
            this.$message.error(resp.data.msg);
          }
        });
      },
      update(id) {
        //1. 打开窗口
        this.dialogVisible = true;
        //2. 发送请求
  
        selectById(id).then((result) => {
          if (result.data.code == 1) {
            this.emp = result.data.data;
            this.emp;
          }
        });
      },
  
      
      //分页
      handleSizeChange(val) {
        // 重新设置每页显示的条数
        this.pageSize = val;
        this.page();
      },
  
      handleCurrentChange(val) {
        // 重新设置当前页码
        this.currentPage = val;
        this.page();
      },
  
  

  

    },
  
  
    watch: {
      entrydate(val) {
        if (val && val.length >= 2) {
          this.beginTime = val[0];
          this.endTime = val[1];
        } else {
          this.beginTime = "";
          this.endTime = "";
        }
      },
    },
  };
  </script>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  </style>
  